<template>
  <page
      ref="scroll"
      :better-scroll="true"
      :header-immerse="true"
      @scroll="scroll">
<!--    <goods-header></goods-header>-->

    <goods-swipper style="margin-top: 50px" :swipperList="swipperList"></goods-swipper>
    <goods-info :goods_info="goodsInfo" :choose_sku="chooseSku"></goods-info>
    <goods-number @change="goodsNumberChange"  :number="buyNumber" :choose_sku="chooseSku"></goods-number>
    <goods-spec @change="changeSku" :sku_list="goodsInfo.sku" :choose_sku="chooseSku"></goods-spec>
    <goods-instructions :goods_info="goodsInfo"></goods-instructions>
<!--    <goods-evaluate></goods-evaluate>-->
<!--    <goods-shop></goods-shop>-->
    <goods-details :detailsSet="detailsSet"></goods-details>
    <goods-action slot="bottom" @addCart="addCart"  @doBuy="doBuy"></goods-action>
  </page>
</template>

<script type="text/ecmascript-6">
import goodsHeader from './goods-header'
import goodsSwipper from './goods-swipper'
import goodsInfo from './goods-info'
import goodsNumber from './goods-number'
import goodsSpec from './goods-spec'
import goodsInstructions from './goods-instructions'
import goodsEvaluate from './goods-evaluate'
import goodsShop from './goods-shop'
import goodsDetails from './goods-details'
import goodsAction from './goods-action'
import session from '@/libs/session'

export default {
  data () {
    return {
      buyNumber:1,
      swipperList: [
        // {
        //   image: 'http://file.api.umijoy.com/img/20210717154203421.png'
        // },
        // {
        //   image: 'http://file.api.umijoy.com/img/20210717154203421.png'
        // },
        // {
        //   image: 'http://file.api.umijoy.com/img/20210717154203421.png'
        // },
      ],


      detailsSet: {
        summary:[]
      },
      scrollY: 0,
      goodsInfo:{},
      chooseSku:{}
    }
  },
  created () {
    this.getGoodsInfo()
  },
  components: {
    goodsHeader,
    goodsSwipper,
    goodsInfo,
    goodsNumber,
    goodsSpec,
    goodsInstructions,
    goodsEvaluate,
    goodsShop,
    goodsDetails,
    goodsAction
  },
  methods: {
    getGoodsInfo(){
      this.doRequest.get('/goods_info?goods_id='+this.$route.params.id).then(ret=>{
        console.log(ret);
        let goodsInfo = ret.data;
        this.goodsInfo = goodsInfo;
        this.chooseSku = goodsInfo.sku[0];
        this.swipperList = goodsInfo.swipperList;
        this.detailsSet.summary = goodsInfo.goods_desc_image
      })
      // let goodsInfo = {
      //   id:1,goods_name:'SNYDER’S迷你蝴蝶形脆饼干42g',price:'22.9',
      //   goods_image:'http://file.api.umijoy.com/img/20210717154203421.png',
      //   sku:[{sku_id:1,sku_name:'42g',sku_image:'http://file.api.umijoy.com/img/20210717154203421.png',price:'33.8'},
      //     {sku_id:2,sku_name:'88888g',sku_image:'http://file.api.umijoy.com/img/20210224203657592.png',price:'1133.8'}]
      // }

    },
    scroll (e) {
      this.scrollY = e.y
    },
    clickTab (n) {
      if (n === 0) {
        this.$refs.scroll.scrollTo([0, 0, 800])
      }
      if (n === 1) {
        this.$refs.scroll.scrollTo('#goods-details')
      }
      if (n === 2) {
        this.$go('/evaluate')
      }
    },
    goodsNumberChange (o) {
     console.log(o);
     if(o.type === 'sub'){
       if(this.buyNumber > 1){
         this.buyNumber = (this.buyNumber -1)
       }
     }else{
       this.buyNumber = (this.buyNumber + 1)
     }
    },
    changeSku(sku){
      this.chooseSku = sku
    },
    addCart(){
      let token = session.isLogin();
        if(typeof token === 'undefined'){
            this.$go('/login');
        }else{
          let addSku = this.chooseSku;
          addSku.buy_num = this.buyNumber;
          this.doRequest.post('/add_cart',addSku).then(ret=>{
             if(ret.success){
               this.$go('/cart')

             }else{
               // this.$toast(ret.errors.message, 'warn', 'correct')
               this.$go('/cart')
             }
          })
        }

    },
    doBuy(){
      this.$go('/checkout?sku_ids='+this.chooseSku.sku_id+'&buy_num='+this.buyNumber)
    }
  }
}
</script>
